<template>
        <template v-for="(item,index) in porps.routers">
          <el-menu-item 
              v-if="!item.children || item.children.length==0"
              :index="`1-${item.meta.id}`"
              :key="index"
              @click="open(item)"
              >
            <el-icon size="20">
              <component :is="item.meta.icon"></component>
            </el-icon>
            <span>
              {{ item.meta.name }}
            </span>
          </el-menu-item>

          <el-sub-menu v-else 
          :index="`1-${item.meta.id}`" 
          :key="item.meta.id"
          >

            <template #title>
              <el-icon><component :is="item.meta.icon"></component></el-icon>
              <span>{{ item.meta.name }}</span>
            </template>
            <el-menu-item  
            v-for="(items,indexe) in item.children" 
            :key="indexe" :index="`${item.meta.id}-${items.meta.id}`"
            @click="open(items)"
            >
              <el-icon><component :is="items.meta.icon"></component></el-icon>
              <span>{{ items.meta.name }}</span>
            </el-menu-item>
          </el-sub-menu>
        </template>


</template>

<script setup lang="ts" name="Menu">
import { useRouter } from 'vue-router';
import useCountStore from '../m-store/stroe';


  const porps= defineProps(['routers'])
  const router=useRouter()
  const CountStore=useCountStore()

  function open(value:any){
    CountStore.addSelectmenu(CountStore,value)
    router.push(value.meta.path)
  }

</script>

<style>

</style>